<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
		html,body,div,ul,li,a,img,span{margin: 0;padding: 0;}
		ul li{list-style: none;}
		a{text-decoration: none;}
			#container{
				width: 600px;
				height: 400px;
				margin: 100px auto;
				overflow: hidden;
				position: relative;
			}
			#list{
				width: 4200px;
				height: 400px;
				
			}
			#list ul li{
				width: 600px;
				height: 400px;
				float: left;
			}
			#list ul li img{
				border: 0;
				display: block;
			}
			.btn a{
				width: 50px;
				height: 50px;
				display: block;
				background: rgba(0,0,0,.6);
				position: absolute;
				top: 50%;
				margin-top: -25px;
				cursor: pointer;
				font-size: 38px;
				font-family: 楷体;
				text-align: center;
				color: #fff;
				display: none;
				z-index: 1;
			}
			.btn .pre{
				left: 0;
			}
			.btn .next{
				right: 0;
			}
			#container:hover .btn a{
				display: block;
			}
			#radius{
				position: absolute;
				bottom: 0px;
				left: 50%;
				z-index: 1;
				margin-left: -40px;
			}
			#radius span{
				display: block;
				width: 10px;
				height: 10px;
				background: rgba(0,0,0,.6);
				border: 1px solid #fff;
				border-radius: 50%;
				cursor: pointer;
				margin: 5px 2px;
				color: #fff;
				float: left;
			}
			#radius span.sel{
				background: orange;
			}
		</style>
	</head>
	<body>
		<div id="container">
			<div id="list">
				<ul>
					<li>
						<a href="jvascript:;">
							<img src="img/1.jpg" width="600" height="400" alt="图片1"/>
						</a>
					</li>
					<li>
						<a href="jvascript:;">
							<img src="img/2.jpg" width="600" height="400" alt="图片1"/>
						</a>
					</li>
					<li>
						<a href="jvascript:;">
							<img src="img/3.jpg" width="600" height="400" alt="图片1"/>
						</a>
					</li>
					<li>
						<a href="jvascript:;">
							<img src="img/4.jpg" width="600" height="400" alt="图片1"/>
						</a>
					</li>
					<li>
						<a href="jvascript:;">
							<img src="img/5.jpg" width="600" height="400" alt="图片1"/>
						</a>
					</li>
				</ul>
			</div>
			<div class="btn">
				<a class="pre" href="javascript:;">&lt;</a>
				<a class="next" href="javascript:;">&gt;</a>
			</div>
			<div id="radius">
				<span class="sel"></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
			</div>
		</div>
	</body>
	
</html>
